<template>
    <div>
        <Layout class="layout" class-prefix="layout">
            <div>
                <Type @update:value="onUpdateType" />
                <Tags :data-source="dataSource" @update:value="onUpdateTag" />
            </div>
            <div>
                <Note @update:value="onUpdateNote" />
                <NumberPad @update:value="onUpdateAmount" @submit="saveRecord" />
            </div>
        </Layout>
    </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import {Component,Watch} from "vue-property-decorator";
    import Type from "@/components/Money/Type.vue";
    import Tags from "@/components/Money/Tags.vue";
    import Note from "@/components/Money/Note.vue";
    import NumberPad from "@/components/Money/NumberPad.vue";
    import { API_GetTagOptions, API_AddMoney } from "@/api/money"

    @Component({
        components:{Type,NumberPad,Note,Tags}
    })
    export default class Money extends Vue {
        currentType = 1;
        dataSource = [] as TagItem[];
        record:RecordItem = {type: 1, kind_id: 0, desc: '', amount: 0 };

        get currentTagList(){
            return this.$store.state.currentTagList;
        }


        created(){
            this.getTagOptions();
        }

        // 获取标签
        getTagOptions() {
            API_GetTagOptions({ type: this.currentType }).then(res => {
                if(res.data.code === 0) {
                    this.dataSource = res.data.result;
                }
            })
        }
        
        onUpdateTag(tagId:number) {
            this.record.kind_id = tagId;
        }
        onUpdateAmount(value:string) {
            this.record.amount = parseFloat(value);
            if(this.record.amount === 0){
                return;
            }
        }
        onUpdateNote(value:string){
            this.record.desc = value;
        }
        
        onUpdateType(value:string){
            this.record.type = value;
            this.currentType = value;
            this.record.kind_id = 0;
            this.getTagOptions();
        }

        saveRecord(){
            if(!this.record.kind_id) {
                this.$toast.success('请选择类型')
                return;
            }
            if(!this.record.amount) {
                this.$toast.success('请请填写金额')
                return;
            }
            API_AddMoney(this.record).then(res => {
                if(res.data.code === 0) {
                    this.$toast.success('添加记账成功');
                }
            })
        }

    }
</script>

<style lang="scss">
    .layout-content {
        flex-grow: 1;
        overflow: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
</style>

<style lang="scss" scoped>

</style>